<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="350" :height="250" :left="uiLeft" :top="uiTop">
        <div class="box">
            <div class="center-table">
                <el-table :data="treeInfoRef" border :cell-style="cellStyle2" :header-cell-style="cellStyleSmall"
                    max-height="180">
                    <el-table-column prop="key" label="名称" :show-overflow-tooltip="true" width="100" />
                    <el-table-column prop="value" label="值" :show-overflow-tooltip="true" width="auto">
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </Dialog>

</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { onMounted, ref, onBeforeUnmount, computed, watch, shallowRef } from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import {
    createVueDisposer,
    toVR,
} from "vue-xe2-plugin/dist-node/components/xe2/tools";
import { FeatureEdit } from "@/scripts/cimrtsManager/featureEdit";
import { cellStyle, headCellStyle, cellStyleSmall, cellStyle2, } from "../../scripts/tableStyle";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};
const uiLeft = document.body.clientWidth - 10 - 350;
const uiTop = 60;

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const eSForest =objm.eSForestManager.eSForest;
const editTree = objm.eSForestManager.editTree;

// 拾取的树木信息
const treeInfoRef = toVR<any>(d, [editTree, "treeInfo"])

onMounted(() => {
    editTree.init();
});
onBeforeUnmount(() => {
    editTree.clear();
});

</script>

<style scoped>
.box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.center-table {
    width: 100%;
}

.edit {
    display: flex;
    justify-content: flex-end;
}
</style>